import { useEffect, useRef, useState } from 'react';
import { Table, Tag, Button, Input, Select, Tabs, Form, Row, Col, DatePicker, } from 'antd';
import { queryUserName } from '@/services/okr'
import { selectObjectList } from '@/services/project'
import { useDebounce } from '@/utils/utils'
import UploadFile from './UploadFile';
import styles from './index.less';

const { Option } = Select;
const { TextArea } = Input;
import moment from 'moment';
import { info } from 'console';
const dataMat = 'YYYY/MM/DD';

const BaseFormInfo = (props) => {
  const [startTime, setStartTime] = useState(null);
  const [endTime, setEndTime] = useState(null);
  const [masterList, setMasterList] = useState([])
  const [memberList, setMemberList] = useState([])
  const [relateList, setRelateList] = useState([])
  const { edit = false,  infoObj = {}, status, disabled } = props;
  useEffect(()=>{
    if(edit){
      setStartTime(infoObj['startTime']);
      setEndTime(infoObj['endTime'])
    }
    selectObjectList().then((res)=>{
      setRelateList(res.data || [])
    })
  }, [])
  const getMaster = (val, type) => {
    if(val){
      queryUserName({name: val}).then((result)=>{
        if(result.code == 200) {
          const list = result.data.user || [];
          getMember(type, list)
        }
      })
    }
  }
  const getMember = (type, list) => {
    switch (type){
      case 'master': setMasterList(list); console.log('888', list); break;
      case 'member': setMemberList(list); break;
      default: setMasterList(list); break;
    }
  }
  const disabledDate = (current) => {
    if (endTime == null) {
      return false;
    } else {
      return current && current > endTime;
    }
  }
  const disabledDate2 = (current) => {
    if (startTime == null) {
      return false;
    } else {
      return current && current < startTime;
    }
  } 
  // const disabled = Number(status) > 2; 
  const layout = {
    labelCol: { span: 4 },
    wrapperCol: { span: 18 },
  };
  const labelCol = {
    labelCol: { span: 2 },
    wrapperCol: { span: 21 },
  }
  return (
    <div className={styles.formWrap}>
       <Form {...layout} autoComplete="off" form={props.form}>
         <Row gutter={20}>
           <Col span={12}>
              <Form.Item
                label={`项目名称`}
                name={`name`}
                rules={[{ required: true, message: '必填' }]}
                // initialValue={edit ? infoObj.name : ''} // infoObj['name']
              >
                <Input placeholder="项目名称(建议不超过50字)" disabled={disabled} maxLength={50} />   
              </Form.Item>
           </Col>
           <Col span={12}>
              <Form.Item
                label={`项目负责人`}
                name={`master`}
                rules={[{ required: true, message: '必填' }]}
                // initialValue={edit ? infoObj['master'] : undefined}
              >
                <Select allowClear placeholder='请输入项目负责人' showSearch onSearch={useDebounce((val)=> getMaster(val, 'master'), 300) }
                   getPopupContainer={(triggerNode) => triggerNode.parentNode}
                   notFoundContent={null}
                   disabled={disabled}
                >
                {masterList.map((user) => (
                  <Option
                    value={`${user.username}`}
                    key={user.id}
                  >{`${user.username}`}</Option>
                ))}
                </Select>
              </Form.Item>
           </Col>
         </Row>
         <Row gutter={20}>
           {/* <Col span={12}>
              <Form.Item
                label={`状态`}
                name={`status`}
                initialValue={edit ? infoObj['status'] : ''}
              >
                <Input placeholder="进度" disabled={disabled} />   
              </Form.Item>
           </Col> */}
           <Col span={24}>
              <Form.Item
                label={`项目成员`}
                name={`member`}
                {...labelCol}
                rules={[{ required: true, message: '必填' }]}
                // initialValue={edit ? infoObj['member'] : undefined}
              >
                <Select mode="multiple" placeholder='请输入项目成员'
                  allowClear showSearch
                  onSearch={useDebounce((val)=>getMaster(val, 'member'), 300)}
                  getPopupContainer={(triggerNode) => triggerNode.parentNode}
                  notFoundContent={null}
                  disabled={disabled}
                >
                  {memberList.map((user) => (
                  <Option
                    value={`${user.username}`}
                    key={user.id}
                  >{`${user.username}`}</Option>
                ))}
                </Select>
              </Form.Item>
           </Col>
         </Row>
         <Row gutter={20}>
           <Col span={12}>
              <Form.Item
                label={`权重`}
                name={`weight`}
                rules={[{ required: true, message: '必填' }]}
                // initialValue={edit ? infoObj['weight'] : ''}
              >
                <Input placeholder="权重" disabled={disabled} />   
              </Form.Item>
           </Col>
           <Col span={12}>
              <Form.Item
                label={`进度`}
                name={`process`}
                // initialValue={edit ? infoObj['process'] : ''}
              >
                <Input placeholder="项目进度" disabled={disabled} />   
              </Form.Item>
           </Col>
         </Row>
         <Row gutter={20}>
           <Col span={12}>
              <Form.Item
                label={`开始时间`}
                name={`starttime`}
                rules={[{ required: true, message: '必填' }]}
                initialValue={edit ? moment(infoObj['starttime'], dataMat) : ''}  
              >
                <DatePicker style={{ width: '100%' }} disabledDate={disabledDate} onChange={(date, dateString) => {setStartTime(date)}} disabled={disabled} placeholder="开始时间" />
              </Form.Item>
           </Col>
           <Col span={12}>
              <Form.Item
                label={`截止时间`}
                name={`endtime`}
                rules={[{ required: true, message: '必填' }]}
                initialValue={edit ? moment(infoObj['endtime'], dataMat) : ''}
              >
                <DatePicker style={{ width: '100%' }} disabledDate={disabledDate2} onChange={(date, dateString) => { setEndTime(date)}} disabled={disabled} placeholder="截止时间" />
              </Form.Item>
           </Col>
         </Row>
         <Row gutter={20}>
           <Col span={24}>
              <Form.Item
                {...labelCol}
                label={`项目备注`}
                name={`remark`}
                initialValue={edit ? (infoObj['remark']) : ''}
              >
                 <TextArea
                    disabled={disabled}
                    allowClear
                    autoSize={{ minRows: 1 }}
                    placeholder="请输入项目的补充说明,不能超过300字"
                    maxLength={300}
                  />
              </Form.Item>
           </Col>
         </Row>
         <Row gutter={20}>
           <Col span={24}>
              <Form.Item
                {...labelCol}
                label={`选择文件`}
                name={`file`}
                initialValue={edit ? (infoObj['file']) : ''}
              >
                 <UploadFile edit={edit} disabled={disabled}></UploadFile>
              </Form.Item>
           </Col>
         </Row>
         <Row gutter={20}>
           <Col span={24}>
              <Form.Item
                {...labelCol}
                label={`关联OKR`}
                name={'oid'}
                initialValue={edit ? (infoObj['oid']) : undefined}
              >
                <Select placeholder='请选择关联'
                  allowClear
                  showSearch
                  getPopupContainer={(triggerNode) => triggerNode.parentNode}
                  notFoundContent={null}
                  disabled={disabled}
                >
                  {relateList.map((user) => (
                  <Option
                    value={`${user.id}`}
                    key={user.id}
                  >{`${user.oname}`}</Option>
                ))}
                </Select>
              </Form.Item>
           </Col>
         </Row>
        
      </Form>
    </div>
  )
}

export default BaseFormInfo